<template>
	<!--<header-nav-tip></header-nav-tip>-->
	<div class="sidebar">
		<h3 class="allTitle">{{menus.title}}</h3>
		<ul class="accordion">
			<li v-for="(d,i) in menus.subMenu">
        <template v-if="i === 0">
          <input type="radio" name="accordion" :id='"ac-"+i'>
        </template>
        <template v-else>
          <input type="radio" name="accordion" :id='"ac-"+i'>
        </template>
        <label :for='"ac-"+i' @click="clickMenu(d)">{{d.title}}</label>
        <div class="accordion-content">
           <ul>
              <template v-for="d in d.links">
                 <li v-if="d.type === subMenuType" class="active" >
                    <!--<a  :href='"#"+d.url'></a>-->
                    <router-link :to='d.url'>
                    	{{d.title}}
                    </router-link >
                </li>
                <li v-else class="noactive">
<!--                    <a  :href='"#"+d.url'>{{d.title}}</a>-->
                    <router-link :to='d.url'>
                    	{{d.title}}
                    </router-link >
                </li>
             </template>
           </ul>
        </div>
      </li>
		</ul>
	</div>
</template>

<script>
	//import headerNavTip from '../containers/header-nav-tip.vue';
	export default {
		name: 'sidebar',
		props: ['menus'],
		components: {
			//    headerNavTip,
		},
		computed: {
			subMenuType() {
				const type = this.$route.params.type;
				const path = this.$route.path;
				if(path === `/trading/${type}/consignation`) {
					console.log(1)
					return 'consignation';
				}
				if(path === `/trading/${type}/trade`) {
					console.log(2)
					return 'trade';
				}
				if(path === `/trading/${type}/market`) {
					console.log(3)
					return 'market';
				}
				return '';
			},
		},
		mounted() {
			var that = this;
			console.log(6666666666)
			console.log(this.menus)
			
			//获取banner
			const acOne = document.getElementById('ac-0');
			const acTwo = document.getElementById('ac-1');
			const acThree = document.getElementById('ac-2');
			const acFour = document.getElementById('ac-3');
			setInterval(() => {
				if(this.$route.path.indexOf('btc') >= 0 && acOne) {
					acOne.setAttribute('checked', 'checked');
					acOne.click();
				}
				if(this.$route.path.indexOf('zec') >= 0 && acTwo) {
					acTwo.setAttribute('checked', 'checked');
					acTwo.click();
				}
				if(this.$route.path.indexOf('etc') >= 0 && acThree) {
					acThree.setAttribute('checked', 'checked');
					acThree.click();
				}
				if(this.$route.path.indexOf('eth') >= 0 && acFour) {
					acFour.setAttribute('checked', 'checked');
					acFour.click();
				}
			}, 200);
		},
		methods: {
			clickMenu(d) {
				if(d.index === 'ac-0') {
					this.$router.push('/trading/btc/trade');
				}
				if(d.index === 'ac-1') {
					this.$router.push('/trading/zec/trade');
				}
				if(d.index === 'ac-2') {
					this.$router.push('/trading/etc/trade');
				}
				if(d.index === 'ac-3') {
					this.$router.push('/trading/eth/trade');
				}
			},
		},
	};
</script>

<style lang="scss">
	/*@import "./sass/variable.scss";*/
	
	.sidebar {
		border: 2px solid #ededed;
		float: left;
		/*margin-bottom: 60px;*/
		text-align: center;
		width: 200px;
		height: 620px;
		.allTitle {
			font-size: 20px;
			color: #283138;
			padding-top: 20px;
			padding-bottom: 10px;
			width: 180px;
			margin: 0 auto;
			border-bottom: 2px solid #283138;
			margin-bottom: 30px;
		}
		.accordion input[type='radio'] {
			display: none;
		}
		.accordion {
			width: 190px;
			margin: 0 auto;
			list-style: none;
		}
		.accordion label {
			display: block;
			font-size: 14px;
			color: #9B9B9B;
			line-height: 36px;
			cursor: pointer;
			position: relative;
		}
		.accordion label:after {
			content: "";
			background-color: #fff;
			width: 9px;
			height: 20px;
			display: inline-block;
			line-height: 20px;
			float: right;
			/*background-image: url(../img/menu_right_icon.png);*/
			background-image: url(../../../../static/imgs/menu_right_icon.png);
			background-repeat: no-repeat;
			background-size: contain;
			margin-top: 13px;
			margin-right: 25px;
		}
		.accordion .accordion-content {
			height: 0;
			overflow: hidden;
			transition: height 0.3s ease;
			height: 0;
			width: 130px;
			margin: 0 auto;
			ul {
				text-align: left;
				li {
					padding: 5px 0;
					font-size: 14px;
					a {
						color: #9D9D9D;
						font-size: 14px;
					}
					&.active {
						a {
							color: #0093F1;
						}
					}
				}
				li.noactive:before {
					content: '';
					width: 6px;
					height: 6px;
					border-radius: 6px;
					display: inline-block;
					background-color: #9D9D9D;
					margin-left: 4px;
					margin-right: 10px;
				}
			}
		}
		.accordion .accordion-content p {
			margin: 10px;
		}
		#ac-0~ label:before {
			content: "";
			width: 15px;
			height: 15px;
			display: inline-block;
			line-height: 15px;
			margin-right: 11px;
			background-image: url(../../../../static/imgs/btc.png);
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			left: 10px;
			top: 10px;
		}
		#ac-0:checked~ label:before {
			background-image: url(../../../../static/imgs/btc_on.png);
		}
		#ac-1~ label:before {
			content: "";
			width: 15px;
			height: 15px;
			display: inline-block;
			line-height: 15px;
			margin-right: 11px;
			background-image: url(../../../../static/imgs/zec.png);
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			left: 10px;
			top: 10px;
		}
		#ac-1:checked~ label:before {
			background-image: url(../../../../static/imgs/zec_on.png);
		}
		#ac-2~ label:before {
			content: "";
			width: 15px;
			height: 15px;
			display: inline-block;
			line-height: 15px;
			margin-right: 11px;
			background-image: url(../../../../static/imgs/etc.png);
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			left: 10px;
			top: 10px;
		}
		#ac-2:checked~ label:before {
			background-image: url(../../../../static/imgs/etc_on.png);
		}
		#ac-3~ label:before {
			content: "";
			width: 15px;
			height: 15px;
			display: inline-block;
			line-height: 15px;
			margin-right: 11px;
			background-image: url(../../../../static/imgs/eth.png);
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			left: 10px;
			top: 10px;
		}
		#ac-3:checked~ label:before {
			background-image: url(../../../../static/imgs/eth_on.png);
		}
		.accordion input:checked~ .accordion-content {
			height: 100px;
			ul {
				text-align: left;
				li.active:before {
					content: '';
					width: 6px;
					height: 6px;
					border-radius: 6px;
					display: inline-block;
					background-color: #0093F1;
					margin-left: 4px;
					margin-right: 10px;
				}
			}
		}
		.accordion input:checked~ label {
			color: #0093F1;
		}
		.accordion input:checked~ label:after {
			content: "";
			background-color: #fff;
			width: 9px;
			height: 20px;
			display: inline-block;
			line-height: 20px;
			float: right;
			background-image: url(../../../../static/imgs/menu_down_icon.png);
			background-repeat: no-repeat;
			background-size: contain;
			margin-right: 25px;
		}
	}
</style>